<template>
    <div class="breadcrumb">
        <ul>
            <li v-if="showIcon"><icon type="icon-address"/></li>
            <li v-for="(item,index) in breadcrumbList" :key="index">
                <span :class="index === breadcrumbList.length - 1 ? 'lastCss' : 'textCss'">
                    <router-link :to="item.path">{{item.name}}</router-link>
                </span>
                <span v-if="index !== breadcrumbList.length - 1" class="iconCss">
                    <icon v-if="separator" type="icon-right-bracket"/>
                    <span v-else>/</span>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: {
    breadcrumb: {
      type: Array,
      default: []
    },
    separator: {
      type: Boolean,
      default: false
    },
    showIcon: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      breadcrumbList: this.breadcrumb
    }
  }
}
</script>
